<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="margin: 0;padding: 0;">
    <canvas id="cvs" style="border:1px solid green"></canvas>

</body>
<script>
    let cvs=document.getElementById('cvs')
    cvs.width=500
    cvs.height=500

    let ctx=cvs.getContext('2d')
    // 须写在前面
    ctx.fillStyle='yellow'
    ctx.strokeStyle='blue'
    // ctx.fillRect(左上角坐标x, y, 宽，高)
    ctx.fillRect(0,0,100,200) //实心矩形
    ctx.strokeRect(200,0,100,200) //空心 
    ctx.lineWidth=5

    // 橡皮擦
    ctx.clearRect(25,0,50,50)

    // 移动
    var y=0
    setInterval(() => {
        ctx.clearRect(400,y,50,50)
        y++
        ctx.fillRect(400,y,50,50)
    }, 50);

    // 圆弧
    // ctx.arc(圆心坐标x, y, 半径，弧度*Math.PI, 逆时针)
    // 1弧度=Π/180=半圆
    // 2弧度=Π/180 *2=整圆
    // 300度有多少个半圆？300/180=5/3个半圆，所以有5/3个弧度
    // 弧度=x度/180
    ctx.arc(400,400,100,1*Math.PI,false)
    ctx.stroke() //边框
    ctx.fill() //填充





    // for (var i = 0; i < 10; i++) {  
    //     setTimeout(() => {
    //         console.log(i);
    //     }, 0);
    // }
    // var a='a'
    // var n=0
    // var b=true

    // console.log(n||a);
    // console.log(n&&a);
    // console.log(b||n);
    // console.log(b&&n);
    // console.log(window.location);
</script>
</html>